<template>
	<view  class="flex-col relative group_4 space-y-32">
		  <view class="flex-col space-y-10">
		<view class="flex-col justify-start  image-wrapper">
		 	<view class="u-flex" >
		 		<view class="grid-item u-flex-col u-row-center u-col-center"  style="margin-left: 70rpx;"  v-for="(menu, index) in list" :key="index" @tap="jump(menu)">
		 			<image class="image_4" :src="menu.image" mode="aspectFill"></image>
		 			<view class="item-title">{{ menu.name }}</view>
		 		</view>
		 	</view>
		</view>
		
		<u-modal ref="uModal" v-model="showModal" :show-cancel-button="true" confirm-color="#F54141"
			cancel-color="#666666" @confirm="confirmLogOut" content="确定退出登录？"></u-modal>
	</view>
	</view>
</template>

<script>
/**
 * shGrid-宫格列表
 * @property {Array} list  - 宫格列表
 */
import { mapMutations, mapActions, mapState, mapGetters } from "vuex";
export default {
	components: {},
	data() {
		return {
			showModal:false,
			phone:this.$PLANE_PHONE
		};
	},
	computed: {},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	created() {},
	methods: {
		...mapActions(["logout"]),
		jump(data) {
			if(data.path_type == 1){
				this.$tools.routerTo(data.path);
				return;
			}
			if(data.path_name == '退出登录'){
				this.showModal = true
			}
			
			if(data.path_name == '客服电话'){
				console.log('客服电话',this.phone)
				uni.makePhoneCall({
					phoneNumber:this.phone,
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			
			}
		},
		confirmLogOut(){
			this.logout();
		}
	}
};
</script>

<style lang="scss">
.page {
  background-color: #f5f5f7;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.section {
  margin-top: -8rpx;
  padding: 116rpx 0 12rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
  background-size: 100% 100%;
}
.u-navbar-fixed {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 991;
	background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649574712864576.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.u-height{
	height: 60px;	
}
.u-padding-top {
	padding-top: 50rpx;
}
.space-y-24 > view:not(:first-child),
.space-y-24 > text:not(:first-child),
.space-y-24 > image:not(:first-child) {
  margin-top: 48rpx;
}
.space-y-18 > view:not(:first-child),
.space-y-18 > text:not(:first-child),
.space-y-18 > image:not(:first-child) {
  margin-top: 36rpx;
}
.group {
  padding-left: 20rpx;
  padding-right: 4rpx;
}
.group_3 {
  height: 41rpx;
}
.font_1 {
  font-size: 56rpx;
  font-family: SFProText;
  line-height: 40rpx;
  font-weight: 600;
}
.text {
  word-break: break-all;
}
.text_2 {
  color: #000000;
  line-height: 41rpx;
  letter-spacing: -1.12rpx;
}
.text_3 {
  color: #ffffff;
}
.group_2 {
  margin-bottom: 4rpx;
  width: 133rpx;
}
.image_2 {
  width: 89rpx;
  height: 44rpx;
}
.image {
  width: 68rpx;
  height: 42rpx;
}
.pos {
  position: absolute;
  left: 0;
  bottom: 0;
}
.font_2 {
  font-size: 32rpx;
  font-family: PingFangSC;
  line-height: 30rpx;
  color: #373737;
}
.text_4 {
  color: #000000;
}
.space-x-14 > view:not(:first-child),
.space-x-14 > text:not(:first-child),
.space-x-14 > image:not(:first-child) {
  margin-left: 28rpx;
}
.image_3 {
  width: 140rpx;
  height: 140rpx;
}
.font_3 {
  font-size: 36rpx;
  font-family: PingFangSC;
}
.text_5 {
  color: #30302f;
  line-height: 36rpx;
}
.group_4 {
  padding: 0 24rpx 24rpx;
}
.space-y-32 > view:not(:first-child),
.space-y-32 > text:not(:first-child),
.space-y-32 > image:not(:first-child) {
  margin-top: 64rpx;
}
.space-y-10 > view:not(:first-child),
.space-y-10 > text:not(:first-child),
.space-y-10 > image:not(:first-child) {
  margin-top: 20rpx;
}
.image-wrapper {
  padding: 28rpx 0;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.image_4 {
  width: 70rpx;
  height: 70rpx;
}
.section_2 {
  padding: 28rpx;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/650813f45a7e3f03101b8cba/650bb0abec8866001128c01f/16952649562554492028.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.text_6 {
  margin-top: 16rpx;
  color: #333233;
  font-size: 40rpx;
  font-family: AlimamaShuHeiTi;
  font-weight: 700;
  line-height: 35rpx;
}
.text-wrapper {
  padding: 16rpx 0;
  background-color: #333233;
  border-radius: 26rpx;
  width: 130rpx;
  height: 52rpx;
}
.text_7 {
  color: #eedfc0;
  font-size: 24rpx;
  font-family: PingFangSC;
  line-height: 22rpx;
}
.image_5 {
  width: 702rpx;
  height: 174rpx;
}
.serch-wrapper {
	align-items: center;
}
.space-y-2 > view:not(:first-child),
.space-y-2 > text:not(:first-child),
.space-y-2 > image:not(:first-child) {
  margin-top: 4rpx;
}
.space-x-8 > view:not(:first-child),
.space-x-8 > text:not(:first-child),
.space-x-8 > image:not(:first-child) {
  margin-left: 16rpx;
}
.text_8 {
  margin-left: 20rpx;
  color: #000000;
  line-height: 33rpx;
}
.image_6 {
  opacity: 0.83;
  width: 52rpx;
  height: 16rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.grid {
  height: 1366rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 910rpx;
  column-gap: 16rpx;
}
.grid-item {
  padding-bottom: 32rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
}
.space-y-9 > view:not(:first-child),
.space-y-9 > text:not(:first-child),
.space-y-9 > image:not(:first-child) {
  margin-top: 18rpx;
}
.image_7 {
  width: 336rpx;
  height: 336rpx;
}
.font_4 {
  font-size: 28rpx;
  font-family: PingFangSC;
  line-height: 26rpx;
  color: #d04241;
}
.equal-division {
  position: relative;
}
.section_3 {
  padding: 8rpx 0;
  background-color: #ffffff;
}
.image_8 {
  width: 48rpx;
  height: 48rpx;
}
.font_5 {
  font-size: 20rpx;
  font-family: PingFangSC;
  line-height: 19rpx;
  color: #999999;
}
.group_5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.text_9 {
  line-height: 18rpx;
}
.group_6 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.equal-division-item {
  padding: 8rpx 0;
  width: 250rpx;
}
.space-y-8 > view:not(:first-child),
.space-y-8 > text:not(:first-child),
.space-y-8 > image:not(:first-child) {
  margin-top: 16rpx;
}
.text_10 {
  color: #000000;
}
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

html {
  font-size: 16px;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}
.tag-box {
	border-radius: 22rpx;
	margin-left: 10rpx;

	.tag-img {
		width: 60rpx;
		height: 60rpx;
		display: inline-block;
		border-radius: 50%;
	}

	.tag-title {
		font-size: 20rpx;
		font-weight: 500;
		color: rgba(129, 129, 129, 1.0);
		line-height: 40rpx;
		padding: 0 10rpx;
	}
}
.badge {
	position: absolute;
	/* #ifndef APP-NVUE */
	display: inline-flex;
	/* #endif */
	justify-content: center;
	align-items: center;
	line-height: 24rpx;
	padding: 4rpx 10rpx;
	border-radius: 100rpx;
	color: #fff;
	font-size: 30rpx;
	z-index: 9;
	background-color: $u-type-error;
	transform: scale(0.8);
	transform-origin: center center;
	// left: 20rpx;
	margin-left: 50rpx;
	// top: 20rpx;
	white-space: nowrap;
}
// 订单卡片
.sh-order-box {
	height: 180rpx;
	background: #fff;
	.order-box {
		flex: 4;
	}
	.all-order {
		position: relative;
		.cut-off--line {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: calc(750rpx/5) - 15rpx;
			width: 30rpx;
			height: 136rpx;
		}
	}

	.order-item {
		flex: 1;
		.item-box {
			position: relative;
		}
		.order-img {
			width: 46rpx;
			height: 46rpx;
		}

		
	}
	
}
.item-title {
		font-size: 25rpx;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 24rpx;
		margin-top: 20rpx;
	}
</style>
